<template>
  <div class="userventer">
    <!-- {{userinfo}} -->
    <b-container class="mt-4">
      <b-row>
        <b-col md="4">
          <b-img
            thumbnail
            fluid
            :src="userinfo.avatar"
            alt="Image 1"
            width="230"
          ></b-img>
          <h2 class="h2">{{userinfo.username}} <a-icon type="crown" class="_crown" /></h2>
          <p>发布话题数:222</p>
          <p>参与话题数:999</p>
          <b-form-input v-model="text" placeholder="我的好友"></b-form-input>
          <b-row class="align-items-center mt-2 bg" v-for="i in 6" :key="i">
            <b-col md="3" cols="2">
              <b-avatar variant="info" :src="userimg" class="mr-3"></b-avatar>
            </b-col>
            <b-col md="9" cols="10">
              <div class="userpy">
                <div class="d-flex justify-content-between">
                  <b>Super Kitty</b>
                  <div><b-icon icon="arrow-right" aria-hidden="true"></b-icon></div>
                </div>
                <span class="p1">sdsdsdsdsdsdsss</span>
              </div></b-col
            >
          </b-row>
        </b-col>
        <b-col md="8">
          <b-container>
            <b-row>
              <b-col md="8">
                <b-form-input v-model="text" placeholder="我的发布"></b-form-input>
              </b-col>
            </b-row>
            <b-row class="mt-3">
              <b-col class="mt-2" md="6" cols="12" v-for="i in 6" :key="i">
                <b-card
                  :img-src="userimg"
                  img-alt="Card image"
                  img-right
                  img-width="80"
                  img-height="80"
                >
                  <b-card-text>
                    Some quick example text to build on the card and make up the bulk of
                    the card's content.
                  </b-card-text>
                </b-card>
              </b-col>
            </b-row>
          </b-container>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: "userventer",
  data() {
    return {
      userimg: require("../assets/zhuzhu.jpeg"),
      text: "",
    };
  },
  computed:{
    ...mapState(["userinfo"])
  },

};
</script>

<style lang="scss">
.userventer {
  .userpy {
    margin-left: -10px;
   
  }
  .bg {
    margin: 0px;
    border-radius: 10px;
    background: #ffffff;
  }
   .p1,.card-text {
      font-size: 12px;
      margin: 0px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-wrap: break-word;
    }
    .h2{
      position: relative;
        ._crown{
         color: blue;
         position: absolute;
         right: 70px;
    }
    }
  
}
</style>
